
//实际在node环境中运行
const path = require('path')
//启用热更新的第二步
const webpack = require('webpack')
//导入在内存中生成html页面的插件
//只要是插件都要放在plugins中
//这个插件的作用：
//1。自动在内存中根据指定页面生成一个内存的页面
//2.自动，把打包好的bundle . js追加到页面中去

//vue-loader15以上版本配置
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// const { VueLoaderPlugin } = require('vue-loader')

const htmlWebpackPlugin = require('html-webpack-plugin')
//这个配置文件,起始就是一 个，JS文件，通过Node中的模块操作,向外暴露了一个配置对象

module.exports={
	entry: path.join(__dirname,'./src/main.js'), //入口，表示要使用webpack打包的哪个文件
	output:{  //输出相关文件
		path: path.join(__dirname,'./dist'), //指定打包好的文件，输出到哪个目录中去
		filename: 'bundle.js'  //这是指定 输出文件的名称
	},
	devServer:{ //这是配置dev-server命令参数的第二种形式，相对来说，这种方式麻烦一些
		// --open --port 3000 --contentBase src --hot
		open:true, //自动打开浏览器
		port: 3000, //设置启动时候的运行端口号
		// contentBase:'src', //指定托管的更目录
		hot:true //启动热更新 的第一步
	},
	plugins:[ //配置插件的节点
		new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象，这是启动热更新的第三步
		new htmlWebpackPlugin({ //创建一个在内存中生成的HTML页面的插件
			template: path.join(__dirname,'./src/index.html'), //指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
			filename: 'index.html' //指定生成的页面名称
		}),
		new VueLoaderPlugin() //vue的插件
	],
	module: { //这个节点用于配置所有第三方模块 加载器
		rules:[ //所有第三方模块 的匹配规则
			{ test: /\.css$/,use:['style-loader','css-loader'] }, //配置处理.css文件的第三方loader规则
			{ test: /\.less$/,use:['style-loader','css-loader','less-loader'] },//这是配置处理.less文件的第三方loader规则
			{ test: /\.scss$/,use:['style-loader','css-loader','sass-loader'] },//这是配置处理.scss文件的第三方loader规则
			{ test: /\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=55&name=[hash:8]-[name],[ext]' },//这是配置处理图片路径的loader
			// limit 给定的值，是图片的大小，单位是byte ，如果我们引用的 图片，大于或等于给定的limit值 ,则不会被转为base64格式
			//的字符串，如果图片小于给定的limit 值，则会被转为base64的字符串 
			//name 属性可以得到图片的原名字，如果有俩图片名字一样，可以在前面加hash
			{ test: /\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader' }, //处理字体文件的loader
			{ test: /\.js$/,use:'babel-loader',exclude:/node_modules/ }, //配置Babel来转换高级的ES语法
			{ test: /\.vue$/,use:'vue-loader'}, //处理.vue文件

		]
	},
	resolve:{
		alias:{ //这是设置Vue被导入时候的包的路径
			// "vue$": "vue/dist/vue.js"
		}
	},
	mode: 'development' //设置mode  mode: 'production'
}

//需要在终端输入webpack
//当我们在控制台,直接输入webpack 命令执行的时候，webpack 做了以下几步:
// 1.首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
// 2. webpack 就会去项目的根目录中，查找一个叫做、 webpack . config.js^ 的配置文件
// 3.当找到配置文件后, webpack 会去解析执行这个配置文件,当解析执行完配置文件后，就得到了配置文件中,导出的配对象
// 4.当webpack 拿到配置对象后,就拿到了配置对象中,指定的入口和出口,然后进行打包构建;

